import { Graph } from "@antv/x6";
import { DagreLayout } from "@antv/layout";
import React from "react";
import Node from "./node";
import "@antv/x6-react-shape";
import {
  getGraphConfig,
  getGraphLayoutConfig,
  getGraphEdgeConfig
} from "./config";
function getGraphNodes() {
  return Array.from({ length: 12 }, (_, i) => {
    return {
      id: `${i + 1}`,
      width: 240,
      height: 100,
      shape: "react-shape",
      component: <Node text="react-shap"></Node>
    };
  });
}

function getGraphEdges() {
  const edges = [
    ["1", "2"],
    ["2", "3"],
    ["2", "4"],
    ["4", "5"],
    ["4", "6"],
    ["4", "7"],
    ["4", "8"],
    ["5", "9"],
    ["6", "10"],
    ["7", "11"],
    ["8", "12"]
  ];
  return edges.map((edge) => {
    const [source, target] = edge;
    return {
      ...getGraphEdgeConfig(),
      source,
      target
    };
  });
}

export default function Antv(container) {
  this.container = container;
  this.create();
  this.onMessage();
}
Antv.prototype.create = function create() {
  this.graph = new Graph({
    container: this.container,
    ...getGraphConfig()
  });
  const dagreLayout = new DagreLayout(getGraphLayoutConfig());
  const data = {
    nodes: getGraphNodes(),
    edges: getGraphEdges()
  };
  const model = dagreLayout.layout(data);

  this.graph.fromJSON(model);
  this.graph.centerContent();
};

Antv.prototype.onMessage = function onMessage() {
  this.graph.on("cell:click", (props) => {
    console.log(props);
  });
};
